<template>
	<view class="mainpadding beijingse">
		<view class="textcenter titletext">实付金额</view>
		<view class="daheitext margin_top textcenter">
			<text class="margin_right1">{{lastmsg.fl_price}}福利券+{{lastmsg.pay_price}}现金</text>
		</view>
		<view class="ffffff mainpadding radius margin_top">
			<view class="flexbetween ">
				<view class="flexleft">
					<view class="jifen margin_right1"></view>
					<view class="notitletext margin_right1">福利券</view>
					<view class="huisetext">(可用{{personInfo.voucher_price || "0.00"}})</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="checkjf"></view>
			</view>
		</view>
		<view class="mainpadding ffffff radius margin_top">
			<view class="titletext">选择现金支付方式</view>
			<view class="flexbetween margin_top xiahuax" @click="changetype(1)">
				<view class="flexleft">
					<view class="weixin margin_right1"></view>
					<view class="notitletext">微信</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==1"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=1"></view>
			</view>
			<view class="flexbetween margin_top xiahuax" @click="changetype(2)">
				<view class="flexleft">
					<view class="zhifub margin_right1"></view>
					<view class="notitletext">支付宝</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==2"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=2"></view>
			</view>
			<view class="flexbetween margin_top" @click="changetype(3)">
				<view class="flexleft">
					<view class="yinhk margin_right1"></view>
					<view class="notitletext margin_right1">银行卡</view>
					<view class="huisetext" v-if="!personInfo.user_bank">（暂未绑卡点击去绑卡）</view>
					<view class="huisetext" v-if="personInfo.user_bank">{{personInfo.user_bank.open_bank}}
					</view>
				</view>
				<!-- 已勾选 -->
				<view class="yigouxuan margin_right3" v-if="paytype==3 && personInfo.user_bank"></view>
				<!-- 未勾选 -->
				<view class="weigouxuan margin_right3" v-if="paytype!=3 && personInfo.user_bank"></view>
			</view>
		</view>
		<!-- 固定底部 -->
		<view class="gudingdb">
			<view class="bigbtn" @click="atoncepay">立即兑换</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				lastmsg: {
					order_pay_no: "", //订单号
					pay_price: "" ,//支付金额
					fl_price:"",//福利券金额
				},
				personInfo: {
					"voucher_price": "",
					"user_bank": {
						"id": 1,
						"bank_realname": "",
						"bank_cardno": "",
						"open_bank": "",
						"bank_address": "",
						"user_id": 2,
					},
				},
				checkjf: true,
				paytype: 1, //1微信支付，2支付宝支付，3银行卡支付
			}
		},
		onLoad(options) {
			this.lastmsg = JSON.parse(decodeURIComponent(options.msg));
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				httpRequest.request('/api/user/index', 'POST', {
				}, false, false, true).then(res => {
					if (res.code == 1) {
						this.personInfo = res.data
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			changetype(i) {
				this.paytype = i
				if (i == 3 && !this.personInfo.user_bank) {
					uni.navigateTo({
						url: "/pages/mypage/yinhangkbd"
					})
					return
				}
			},
			// 立即支付
			atoncepay() {
				let order_from = 10 //订单来源，10H5，20App
				// #ifdef H5
					order_from = 10
				// #endif
				// #ifdef APP-PLUS
					order_from = 20
				// #endif
				
				if(Number(this.personInfo.voucher_price)<Number(this.lastmsg.fl_price)){
					httpRequest.toast("很抱歉，您的福利券数量不足，无法进行兑换")
					return false
				}
				httpRequest.modal('提示', '确定立即兑换吗？', true, (res) => {
					if (res) {
						httpRequest.request('/api/order/payment1', 'POST', {
							order_from:order_from,
							type: this.paytype,
							order_pay_no: this.lastmsg.order_pay_no,
						}, false, false, true).then(res => {
							if (res.code == 1) {
								uni.reLaunch({
									url:"/pages/homepage/homepage"
								})
							} else {
								httpRequest.toast(res.msg);
							}
						}).catch(err => {
							httpRequest.toast(err.msg);
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.huisetext {
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #666666;
	}

	.jifen {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/jf.png');
	}

	.yinhk {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/yhk.png');
	}

	.fulijuan {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/flj.png');
	}

	.weixin {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/weixin.png');
	}

	.zhifub {
		width: 32rpx;
		height: 32rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/zhifub.png');
	}

	.xiahuax {
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(0, 0, 0, 0.05);
	}

	.daheitext {
		font-size: 36rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
</style>
